<script lang="ts" setup>
import type { TablePaginationConfig, DrawerProps } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import type { TableColumnType, TableProps, SelectProps } from 'ant-design-vue';
import { $t } from '@vben/locales';

import type { MinishopStoreApply, MinishopStoreApplyResponse } from './types.ts';
import type { ComponentSetting, ComponentSettingResponse } from '../../uctoo/component_setting/types.ts';
import { onMounted, reactive, ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import editform from './editform.vue';
import { useRoute } from 'vue-router';
import { removeEmpty } from '#/utils/common';
import { uctoo_minishop_store_apply, uctoo_component_setting } from '#/store';
import { useRepo } from 'pinia-orm';
import { useAxiosRepo } from '@pinia-orm/axios';
import { buildPrismaWhere } from '#/utils/prismaUtils';

type Key = string | number;

// 获取当前路由信息
const route = useRoute();
// 获取查询字符串部分
let queryParam = reactive({ ...route.query });
const componentSettingData = ref<ComponentSetting[]>([]);
const activeKey = ref(['']); // 默认折叠面板关闭
const isCollapsed = computed(() => activeKey.value.includes('1')); // 用于控制按钮文本
let componentSettingQueryParam = ref("uctoo_minishop_store_apply");
const columnsData = [
{ dataIndex: 'id', key: 'id', title: $t('database_column.uctoo.minishop_store_apply.id'), resizable: true },
{ dataIndex: 'user_id', key: 'user_id', title: $t('database_column.uctoo.minishop_store_apply.user_id'), resizable: true },
{ dataIndex: 'apply_num', key: 'apply_num', title: $t('database_column.uctoo.minishop_store_apply.apply_num'), resizable: true },
{ dataIndex: 'status_msg', key: 'status_msg', title: $t('database_column.uctoo.minishop_store_apply.status_msg'), resizable: true },
{ dataIndex: 'status', key: 'status', title: $t('database_column.uctoo.minishop_store_apply.status'), resizable: true },
{ dataIndex: 'creator', key: 'creator', title: $t('database_column.uctoo.minishop_store_apply.creator'), resizable: true },
{ dataIndex: 'created_at', key: 'created_at', title: $t('database_column.uctoo.minishop_store_apply.created_at'), resizable: true },
{ dataIndex: 'updated_at', key: 'updated_at', title: $t('database_column.uctoo.minishop_store_apply.updated_at'), resizable: true },
{ dataIndex: 'deleted_at', key: 'deleted_at', title: $t('database_column.uctoo.minishop_store_apply.deleted_at'), resizable: true },
{ dataIndex: 'gender', key: 'gender', title: $t('database_column.uctoo.minishop_store_apply.gender'), resizable: true },
{ dataIndex: 'idcard_image', key: 'idcard_image', title: $t('database_column.uctoo.minishop_store_apply.idcard_image'), resizable: true },
{ dataIndex: 'idcard_no', key: 'idcard_no', title: $t('database_column.uctoo.minishop_store_apply.idcard_no'), resizable: true },
{ dataIndex: 'mobile', key: 'mobile', title: $t('database_column.uctoo.minishop_store_apply.mobile'), resizable: true },
{ dataIndex: 'realname', key: 'realname', title: $t('database_column.uctoo.minishop_store_apply.realname'), resizable: true },
{ dataIndex: 'skill', key: 'skill', title: $t('database_column.uctoo.minishop_store_apply.skill'), resizable: true },
{ dataIndex: 'user_model', key: 'user_model', title: $t('database_column.uctoo.minishop_store_apply.user_model'), resizable: true },
{ dataIndex: 'address', key: 'address', title: $t('database_column.uctoo.minishop_store_apply.address'), resizable: true },
{ dataIndex: 'age', key: 'age', title: $t('database_column.uctoo.minishop_store_apply.age'), resizable: true },
{ dataIndex: 'badly_off', key: 'badly_off', title: $t('database_column.uctoo.minishop_store_apply.badly_off'), resizable: true },
{ dataIndex: 'birthday', key: 'birthday', title: $t('database_column.uctoo.minishop_store_apply.birthday'), resizable: true },
{ dataIndex: 'buddhist_name', key: 'buddhist_name', title: $t('database_column.uctoo.minishop_store_apply.buddhist_name'), resizable: true },
{ dataIndex: 'career', key: 'career', title: $t('database_column.uctoo.minishop_store_apply.career'), resizable: true },
{ dataIndex: 'conversion_time', key: 'conversion_time', title: $t('database_column.uctoo.minishop_store_apply.conversion_time'), resizable: true },
{ dataIndex: 'corporation', key: 'corporation', title: $t('database_column.uctoo.minishop_store_apply.corporation'), resizable: true },
{ dataIndex: 'education', key: 'education', title: $t('database_column.uctoo.minishop_store_apply.education'), resizable: true },
{ dataIndex: 'emergency_contact', key: 'emergency_contact', title: $t('database_column.uctoo.minishop_store_apply.emergency_contact'), resizable: true },
{ dataIndex: 'emergency_mobile', key: 'emergency_mobile', title: $t('database_column.uctoo.minishop_store_apply.emergency_mobile'), resizable: true },
{ dataIndex: 'emergency_relationship', key: 'emergency_relationship', title: $t('database_column.uctoo.minishop_store_apply.emergency_relationship'), resizable: true },
{ dataIndex: 'health', key: 'health', title: $t('database_column.uctoo.minishop_store_apply.health'), resizable: true },
{ dataIndex: 'idcard_type', key: 'idcard_type', title: $t('database_column.uctoo.minishop_store_apply.idcard_type'), resizable: true },
{ dataIndex: 'job_title', key: 'job_title', title: $t('database_column.uctoo.minishop_store_apply.job_title'), resizable: true },
{ dataIndex: 'nationality', key: 'nationality', title: $t('database_column.uctoo.minishop_store_apply.nationality'), resizable: true },
{ dataIndex: 'reason', key: 'reason', title: $t('database_column.uctoo.minishop_store_apply.reason'), resizable: true },
{ dataIndex: 'school', key: 'school', title: $t('database_column.uctoo.minishop_store_apply.school'), resizable: true },
{ dataIndex: 'signin_time', key: 'signin_time', title: $t('database_column.uctoo.minishop_store_apply.signin_time'), resizable: true },
{ dataIndex: 'signout_time', key: 'signout_time', title: $t('database_column.uctoo.minishop_store_apply.signout_time'), resizable: true },
{ dataIndex: 'action', key: 'action', fixed: 'right' as 'right', title:$t('operate')  },
];
const columns = ref<TableColumnsType>(columnsData);

const selectedColumns = ref(
  (columns.value as any[])
    .filter((col) => 'dataIndex' in col)
    .map(col => col.dataIndex)
);

const handleColumnChange = () => {}; 
let filteredColumns = computed(() => {
  return (columns.value as any[]).filter((col) => {
    return 'dataIndex' in col && selectedColumns.value.includes(col.dataIndex as string);
  }) as TableColumnsType;
});
const dataSource = ref<MinishopStoreApply[]>([]);
const loading = ref(false);
const pagination = reactive<TablePaginationConfig>({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
});

const modalVisible = ref(false);
const modalMode = ref<'add' | 'edit'>('add');
const currentRecord = ref<MinishopStoreApply | null>(null);
const isRecycleBin = ref(false);
const checkedHardDelete = ref(false); 

// 定义搜索表单的接口
interface SearchFormState {
id:string | null;
user_id:string | null;
apply_num:number | null;
status_msg:string | null;
status:number | null;
creator:string | null;
created_at: [string, string] | null;
updated_at: [string, string] | null;
deleted_at: [string, string] | null;
gender:string | null;
idcard_image:string | null;
idcard_no:string | null;
mobile:string | null;
realname:string | null;
skill:string | null;
user_model:string | null;
address:string | null;
age:string | null;
badly_off:string | null;
birthday:Date | null;
buddhist_name:string | null;
career:string | null;
conversion_time:Date | null;
corporation:string | null;
education:string | null;
emergency_contact:string | null;
emergency_mobile:string | null;
emergency_relationship:string | null;
health:string | null;
idcard_type:string | null;
job_title:string | null;
nationality:string | null;
reason:string | null;
school:string | null;
signin_time:Date | null;
signout_time:Date | null;
}

// 修改 searchForm 的定义，添加类型
const searchForm = reactive<SearchFormState>({
id: null,
user_id: null,
apply_num: null,
status_msg: null,
status: null,
creator: null,
created_at: null,
updated_at: null,
deleted_at: null,
gender: null,
idcard_image: null,
idcard_no: null,
mobile: null,
realname: null,
skill: null,
user_model: null,
address: null,
age: null,
badly_off: null,
birthday: null,
buddhist_name: null,
career: null,
conversion_time: null,
corporation: null,
education: null,
emergency_contact: null,
emergency_mobile: null,
emergency_relationship: null,
health: null,
idcard_type: null,
job_title: null,
nationality: null,
reason: null,
school: null,
signin_time: null,
signout_time: null,
});

interface SearchOperatorState {
id: string | null;
user_id: string | null;
apply_num: string | null;
status_msg: string | null;
status: string | null;
creator: string | null;
created_at: string | null;
updated_at: string | null;
deleted_at: string | null;
gender: string | null;
idcard_image: string | null;
idcard_no: string | null;
mobile: string | null;
realname: string | null;
skill: string | null;
user_model: string | null;
address: string | null;
age: string | null;
badly_off: string | null;
birthday: string | null;
buddhist_name: string | null;
career: string | null;
conversion_time: string | null;
corporation: string | null;
education: string | null;
emergency_contact: string | null;
emergency_mobile: string | null;
emergency_relationship: string | null;
health: string | null;
idcard_type: string | null;
job_title: string | null;
nationality: string | null;
reason: string | null;
school: string | null;
signin_time: string | null;
signout_time: string | null;
}

const SearchOperator = reactive<SearchOperatorState>({
id: null,
user_id: null,
apply_num: null,
status_msg: null,
status: null,
creator: null,
created_at: null,
updated_at: null,
deleted_at: null,
gender: null,
idcard_image: null,
idcard_no: null,
mobile: null,
realname: null,
skill: null,
user_model: null,
address: null,
age: null,
badly_off: null,
birthday: null,
buddhist_name: null,
career: null,
conversion_time: null,
corporation: null,
education: null,
emergency_contact: null,
emergency_mobile: null,
emergency_relationship: null,
health: null,
idcard_type: null,
job_title: null,
nationality: null,
reason: null,
school: null,
signin_time: null,
signout_time: null,
});


const ORDEROPTIONS = ['id','user_id','apply_num','status_msg','status','creator','created_at','updated_at','deleted_at','gender','idcard_image','idcard_no','mobile','realname','skill','user_model','address','age','badly_off','birthday','buddhist_name','career','conversion_time','corporation','education','emergency_contact','emergency_mobile','emergency_relationship','health','idcard_type','job_title','nationality','reason','school','signin_time','signout_time',];


const SearchOperatorOptions = ref<SelectProps['options']>([
  { value: 'equals', label: '='},{value: 'not', label: '!='},{value: 'lt',label: '<' },
  { value: 'lte', label: '<='  },{value: 'gt',  label: '>' },{value: 'gte',label: '>=' },
  { value: 'in',  label: 'in'  },{value: 'contains', label: `${$t('page.contains')}` }]);
const selectedAscItems = ref<string[]>([]);
const selectedDescItems = ref<string[]>([]);

const availableOptions = computed(() => {
  return ORDEROPTIONS
    .filter(option => 
      !selectedAscItems.value.includes(option) && 
      !selectedDescItems.value.includes(option)
    )
    .map(option => ({ value: option }));
});

// 计算属性，用于生成 queryParamSort 字符串
const queryParamSort = computed(() => {
  const ascItems = selectedAscItems.value.map(item => item).join(',');
  const descItems = selectedDescItems.value.map(item => `-${item}`).join(',');
  return `${[ascItems, descItems].filter(Boolean).join(',')}`;
});

const resetSearch = () => {
searchForm.id=null;
searchForm.user_id=null;
searchForm.apply_num=null;
searchForm.status_msg=null;
searchForm.status=null;
searchForm.creator=null;
searchForm.created_at = null;
searchForm.updated_at = null;
searchForm.deleted_at = null;
searchForm.gender=null;
searchForm.idcard_image=null;
searchForm.idcard_no=null;
searchForm.mobile=null;
searchForm.realname=null;
searchForm.skill=null;
searchForm.user_model=null;
searchForm.address=null;
searchForm.age=null;
searchForm.badly_off=null;
searchForm.birthday=null;
searchForm.buddhist_name=null;
searchForm.career=null;
searchForm.conversion_time=null;
searchForm.corporation=null;
searchForm.education=null;
searchForm.emergency_contact=null;
searchForm.emergency_mobile=null;
searchForm.emergency_relationship=null;
searchForm.health=null;
searchForm.idcard_type=null;
searchForm.job_title=null;
searchForm.nationality=null;
searchForm.reason=null;
searchForm.school=null;
searchForm.signin_time=null;
searchForm.signout_time=null;

  pagination.current = 1;
  searchStatus.value = false;
  queryParam.filter = null;
  fetchData();
};


const searchStatus = ref(false);
const handleSearch = () => {
  pagination.current = 1;
  searchStatus.value = true;
  fetchData();
};
const fetchData = async () => {
  loading.value = true;
  try {
    // 构建查询参数
    let params: Record<string, any> = {};
    if(searchStatus.value){
         if (searchForm.id) params.id =  searchForm.id ;
   if (searchForm.user_id) params.user_id =  searchForm.user_id ;
   if (searchForm.apply_num) params.apply_num =  Number(searchForm.apply_num) ;
   if (searchForm.status_msg) params.status_msg =  searchForm.status_msg ;
   if (searchForm.status) params.status =  Number(searchForm.status) ;
   if (searchForm.creator) params.creator =  searchForm.creator ;
   if (searchForm.created_at) params.created_at = searchForm.created_at;
   if (searchForm.updated_at) params.updated_at = searchForm.updated_at;
   if (searchForm.deleted_at) params.deleted_at = searchForm.deleted_at;
   if (searchForm.gender) params.gender =  searchForm.gender ;
   if (searchForm.idcard_image) params.idcard_image =  searchForm.idcard_image ;
   if (searchForm.idcard_no) params.idcard_no =  searchForm.idcard_no ;
   if (searchForm.mobile) params.mobile =  searchForm.mobile ;
   if (searchForm.realname) params.realname =  searchForm.realname ;
   if (searchForm.skill) params.skill =  searchForm.skill ;
   if (searchForm.user_model) params.user_model =  searchForm.user_model ;
   if (searchForm.address) params.address =  searchForm.address ;
   if (searchForm.age) params.age =  searchForm.age ;
   if (searchForm.badly_off) params.badly_off =  searchForm.badly_off ;
   if (searchForm.birthday) params.birthday =  searchForm.birthday ;
   if (searchForm.buddhist_name) params.buddhist_name =  searchForm.buddhist_name ;
   if (searchForm.career) params.career =  searchForm.career ;
   if (searchForm.conversion_time) params.conversion_time =  searchForm.conversion_time ;
   if (searchForm.corporation) params.corporation =  searchForm.corporation ;
   if (searchForm.education) params.education =  searchForm.education ;
   if (searchForm.emergency_contact) params.emergency_contact =  searchForm.emergency_contact ;
   if (searchForm.emergency_mobile) params.emergency_mobile =  searchForm.emergency_mobile ;
   if (searchForm.emergency_relationship) params.emergency_relationship =  searchForm.emergency_relationship ;
   if (searchForm.health) params.health =  searchForm.health ;
   if (searchForm.idcard_type) params.idcard_type =  searchForm.idcard_type ;
   if (searchForm.job_title) params.job_title =  searchForm.job_title ;
   if (searchForm.nationality) params.nationality =  searchForm.nationality ;
   if (searchForm.reason) params.reason =  searchForm.reason ;
   if (searchForm.school) params.school =  searchForm.school ;
   if (searchForm.signin_time) params.signin_time =  searchForm.signin_time ;
   if (searchForm.signout_time) params.signout_time =  searchForm.signout_time ;


       const where = buildPrismaWhere(params, SearchOperator);
       queryParam.filter = JSON.stringify(where);
    }else{  //后台地址跳转查询场景，从url获取查询参数
      // 获取查询字符串部分
    }
    if(queryParamSort.value){
      queryParam.sort = queryParamSort.value;
    }
    // 根据回收站状态动态修改条件
    if (isRecycleBin.value) {
      // 添加到回收站：要求 deleted_at 不为空
      const filterStr = Array.isArray(queryParam.filter) ? queryParam.filter[0] || '{}' : queryParam.filter || '{}';
      const filterObj = JSON.parse(filterStr);
      queryParam.filter = JSON.stringify({
        ...filterObj,
        deleted_at: { not: null }
      });
    } else {
      // 不在回收站：要求 deleted_at 为空
      const filterStr = Array.isArray(queryParam.filter) ? queryParam.filter[0] || '{}' : queryParam.filter || '{}';
      const filterObj = JSON.parse(filterStr);
      queryParam.filter = JSON.stringify({
        ...filterObj,
        deleted_at: { equals: null }
      });
    }
    const result = await useAxiosRepo(uctoo_minishop_store_apply).api().getuctooMinishopStoreApplyList(
      (pagination.current || 1) - 1, 
      pagination.pageSize || 10,
      queryParam);
    const res = result.response.data as unknown as MinishopStoreApplyResponse;
    dataSource.value = isRecycleBin.value
      ? res.minishopStoreApplys.filter((minishopStoreApply) => minishopStoreApply.deleted_at !== null)
      : res.minishopStoreApplys.filter((minishopStoreApply) => minishopStoreApply.deleted_at === null);
    pagination.total = res.totalCount;
  } catch {
    message.error($t('page.GetDataFailed'));
  } finally {
    loading.value = false;
  }
  //查询控件配置
  try {
    // 构建查询参数
    const params: Record<string, any> = {};
    params.filter = JSON.stringify({"table_name":{"equals":componentSettingQueryParam.value}});
    const result = await useAxiosRepo(uctoo_component_setting).api().getuctooComponentSettingList(
      0,
      10,
      params,
    );
    const res = result.response.data as unknown as ComponentSettingResponse;
    componentSettingData.value = res.componentSettings;
    if(componentSettingData.value[0]){
      selectedColumns.value = JSON.parse(componentSettingData.value[0].selected_table_column ?? '[]');
    }
  } catch {
    message.error($t('page.GetDataFailed'));
  } finally {
    loading.value = false;
  }
};

const handleTableChange = (pag: TablePaginationConfig) => {
  pagination.current = pag.current || 1;
  pagination.pageSize = pag.pageSize || 10;
  fetchData();
};

const handleAdd = () => {
  modalMode.value = 'add';
  currentRecord.value = null;
  modalVisible.value = true;
};

const handleRecyle = (checked: boolean) => {
  console.log(checked);
  pagination.current = 1;
  isRecycleBin.value = checked;
  fetchData();
};

const handleRestore = async (record: MinishopStoreApply) => {
  try {
    await useAxiosRepo(uctoo_minishop_store_apply).api().edituctooMinishopStoreApply({ deleted_at: '0', id: record.id });
    message.success($t('page.RestoreSuccess'));
    fetchData();
  } catch {
    message.error($t('page.RestoreFailed'));
  }
};

const handleMultiRestore = async () => {
  try {
    await useAxiosRepo(uctoo_minishop_store_apply).api().edituctooMinishopStoreApply({ deleted_at: '0', ids: JSON.stringify(rowSelectState.selectedRowKeys) });
    message.success($t('page.RestoreSuccess'));
    fetchData();
  } catch {
    message.error($t('page.RestoreFailed'));
  }
};

const handleEdit = (record: MinishopStoreApply) => {
  modalMode.value = 'edit';
  currentRecord.value = record;
  modalVisible.value = true;
};

const handleMultiEdit = () => {
  modalMode.value = 'edit';
  currentRecord.value = null;
  modalVisible.value = true;
};

const handleDelete = async (record: MinishopStoreApply) => {
  try {
    if(checkedHardDelete){
      await useAxiosRepo(uctoo_minishop_store_apply).api().deleteuctooMinishopStoreApply({id:record.id, force:1});
    }else{
      await useAxiosRepo(uctoo_minishop_store_apply).api().deleteuctooMinishopStoreApply({id:record.id});
    }
    checkedHardDelete.value = false;
    message.success($t('page.DeleteSuccess'));
    fetchData();
  } catch {
    message.error($t('page.DeleteFailed'));
  }
};

const handleMultiDelete = async () => {
  try {
    await useAxiosRepo(uctoo_minishop_store_apply).api().deleteuctooMinishopStoreApply({ids: JSON.stringify(rowSelectState.selectedRowKeys)});
    message.success($t('page.DeleteSuccess'));
    fetchData();
  } catch {
    message.error($t('page.DeleteFailed'));
  }
};

const handleSuccess = () => {
  modalVisible.value = false;
  fetchData();
};

const rowSelectState = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});
const hasSelected = computed(() => rowSelectState.selectedRowKeys.length > 0);

const onSelectChange = (selectedRowKeys: Key[]) => {
  rowSelectState.selectedRowKeys = selectedRowKeys;
};


const placement = ref<DrawerProps['placement']>('left');
const open = ref<boolean>(false);

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

const onSetting = async () => {
    try {
      if(componentSettingData.value[0]){
        componentSettingData.value[0].selected_table_column = JSON.stringify(selectedColumns.value);
      }
      await useAxiosRepo(uctoo_component_setting).api().edituctooComponentSetting(removeEmpty(componentSettingData.value[0]));
        message.success($t('page.SettingSuccess'));
    } catch {
      message.error($t('page.SettingFailed'));
    }
  open.value = false;
};

const handleResizeColumn = (w:number, col:{ width: number }) => {
  col.width = w;
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="p-4">
    <a-card :bordered="false">
    <!-- 搜索表单 -->
    <a-form layout="inline" class="mb-4 flex flex-wrap gap-4">
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.id')">
          <a-input
            v-model:value="searchForm.id"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.user_id')">
          <a-input
            v-model:value="searchForm.user_id"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.user_id')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.user_id" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.apply_num')">
          <a-input
            v-model:value="searchForm.apply_num"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.apply_num')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.apply_num" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>

        <!-- 折叠面板，包含更多控件 -->
    <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end" :ghost="true">
      <a-collapse-panel key="1" :header="isCollapsed ? $t('page.Expand'): $t('page.Collapse')" >
          <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.status_msg')">
          <a-input
            v-model:value="searchForm.status_msg"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.status_msg')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.status_msg" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.status')">
          <a-input
            v-model:value="searchForm.status"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.status')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.status" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.creator')">
          <a-input
            v-model:value="searchForm.creator"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.creator')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.creator" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.created_at')">
            <a-select v-model:value="SearchOperator.created_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.created_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.minishop_store_apply.created_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.updated_at')">
            <a-select v-model:value="SearchOperator.updated_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.updated_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.minishop_store_apply.updated_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.deleted_at')">
            <a-select v-model:value="SearchOperator.deleted_at" :options="SearchOperatorOptions" style="width: 70px">
            </a-select>
            <a-date-picker v-model:value="searchForm.deleted_at" valueFormat="YYYY-MM-DDTHH:mm:ssZ" show-time :placeholder="$t('database_column.uctoo.minishop_store_apply.deleted_at')" >
            </a-date-picker>
          </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.gender')">
          <a-input
            v-model:value="searchForm.gender"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.gender')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.gender" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.idcard_image')">
          <a-input
            v-model:value="searchForm.idcard_image"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.idcard_image')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.idcard_image" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.idcard_no')">
          <a-input
            v-model:value="searchForm.idcard_no"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.idcard_no')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.idcard_no" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.mobile')">
          <a-input
            v-model:value="searchForm.mobile"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.mobile')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.mobile" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.realname')">
          <a-input
            v-model:value="searchForm.realname"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.realname')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.realname" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.skill')">
          <a-input
            v-model:value="searchForm.skill"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.skill')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.skill" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.user_model')">
          <a-input
            v-model:value="searchForm.user_model"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.user_model')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.user_model" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.address')">
          <a-input
            v-model:value="searchForm.address"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.address')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.address" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.age')">
          <a-input
            v-model:value="searchForm.age"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.age')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.age" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.badly_off')">
          <a-input
            v-model:value="searchForm.badly_off"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.badly_off')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.badly_off" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.birthday')">
          <a-input
            v-model:value="searchForm.birthday"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.birthday')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.birthday" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.buddhist_name')">
          <a-input
            v-model:value="searchForm.buddhist_name"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.buddhist_name')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.buddhist_name" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.career')">
          <a-input
            v-model:value="searchForm.career"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.career')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.career" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.conversion_time')">
          <a-input
            v-model:value="searchForm.conversion_time"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.conversion_time')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.conversion_time" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.corporation')">
          <a-input
            v-model:value="searchForm.corporation"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.corporation')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.corporation" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.education')">
          <a-input
            v-model:value="searchForm.education"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.education')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.education" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.emergency_contact')">
          <a-input
            v-model:value="searchForm.emergency_contact"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.emergency_contact')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.emergency_contact" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.emergency_mobile')">
          <a-input
            v-model:value="searchForm.emergency_mobile"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.emergency_mobile')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.emergency_mobile" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.emergency_relationship')">
          <a-input
            v-model:value="searchForm.emergency_relationship"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.emergency_relationship')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.emergency_relationship" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.health')">
          <a-input
            v-model:value="searchForm.health"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.health')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.health" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.idcard_type')">
          <a-input
            v-model:value="searchForm.idcard_type"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.idcard_type')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.idcard_type" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.job_title')">
          <a-input
            v-model:value="searchForm.job_title"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.job_title')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.job_title" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.nationality')">
          <a-input
            v-model:value="searchForm.nationality"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.nationality')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.nationality" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.reason')">
          <a-input
            v-model:value="searchForm.reason"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.reason')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.reason" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.school')">
          <a-input
            v-model:value="searchForm.school"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.school')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.school" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.signin_time')">
          <a-input
            v-model:value="searchForm.signin_time"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.signin_time')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.signin_time" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
  <a-form-item :label="$t('database_column.uctoo.minishop_store_apply.signout_time')">
          <a-input
            v-model:value="searchForm.signout_time"
            :placeholder="$t('database_column.uctoo.minishop_store_apply.signout_time')"
            allow-clear
          >
            <template #addonBefore>
              <a-select v-model:value="SearchOperator.signout_time" :options="SearchOperatorOptions" style="width: 70px">
              </a-select>
            </template>
          </a-input>
        </a-form-item>
 
        </a-collapse-panel>
      </a-collapse>
      <div class="mutually-exclusive-select">
    <a-select
      v-model:value="selectedAscItems"
      mode="multiple"
      :placeholder="$t('page.OrderASC')"
      style="width: 200px; margin-right: 8px"
      :options="availableOptions"
    ></a-select>
    <a-select
      v-model:value="selectedDescItems"
      mode="multiple"
      :placeholder="$t('page.OrderDESC')"
      style="width: 200px"
      :options="availableOptions"
    ></a-select>
  </div>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">{{$t('page.Search')}}</a-button>
            <a-button @click="resetSearch">{{$t('page.resetSearch')}}</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <div class="mb-4 flex items-center justify-between">
        <div>
          <a-switch
            v-model:checked="isRecycleBin"
            :checked-children="$t('page.RecycleBin')"
            :un-checked-children="$t('page.RecycleBin')"
            @change="handleRecyle"
          />
        </div>
        <div>
          
          
              <template v-if="isRecycleBin">
                <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading"  @click="handleMultiRestore">
                  {{$t('page.Restore')}}
                </a-button>
              </template>
              <template v-else>
                <a-space>
                <a-popconfirm :disabled="!hasSelected" :loading="rowSelectState.loading"
                  :title="$t('page.ConfirmDelete')"
                  @confirm="handleMultiDelete"
                >
                  <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading">
                    {{$t('page.Delete')}}
                  </a-button>
                </a-popconfirm>
                <a-button type="primary" :disabled="!hasSelected" :loading="rowSelectState.loading"  @click="handleMultiEdit" >
                    {{$t('page.Edit')}}
                  </a-button>
                </a-space>
              </template>
        </div>
        <a-button type="primary" @click="showDrawer">{{$t('page.Setting')}}</a-button>
        <a-button type="primary" @click="handleAdd">{{$t('page.Add')}}</a-button>
      </div>
  <a-drawer :width="500" title="" :placement="placement" :open="open" @close="onClose">
    <template #extra>
      <a-button style="margin-right: 8px" @click="onClose">{{$t('page.Cancel')}}</a-button>
      <a-button type="primary" @click="onSetting">{{$t('page.Submit')}}</a-button>
    </template>
    <a-checkbox-group v-model:value="selectedColumns" @change="handleColumnChange">
      <a-row>
        <a-col v-for="col in columnsData" :key="col.dataIndex" :span="8">
          <a-checkbox :value="col.dataIndex">{{ col.title }}</a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </a-drawer>
      
      <a-table rowKey="id"
        :columns="filteredColumns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 'max-content'  }"
        @resizeColumn="handleResizeColumn"
        :row-selection="{ selectedRowKeys: rowSelectState.selectedRowKeys, onChange: onSelectChange }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <template v-if="isRecycleBin">
                <a class="hover:text-blue-500" @click="handleRestore(record)"
                  >{{$t('page.Restore')}}</a
                >
              </template>
              <template v-else>
                <a class="hover:text-blue-500" @click="handleEdit(record)"
                  >{{$t('page.Edit')}}</a
                >
                <a-popconfirm
                  :title="$t('page.ConfirmDelete')"
                  @confirm="handleDelete(record)"
                >
                <template #description>
                  <p>{{$t('page.checkedHardDelete')}}</p>
                  <a-checkbox v-model:checked="checkedHardDelete">{{$t('page.HardDelete')}}</a-checkbox>
                </template>
                
                  <a class="hover:text-blue-500">{{$t('page.Delete')}}</a>
                </a-popconfirm>
              </template>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    <editform
      v-model:visible="modalVisible"
      :mode="modalMode"
      :record="currentRecord"
      :componentSettingData="componentSettingData"
      :ids="rowSelectState.selectedRowKeys as string[]"
      @success="handleSuccess"
    />
  </div>
</template>
